<template>
	<div>
		<el-row>
			<!-- 步骤条 -->
			<el-col :span="24">
				<el-steps :active="step" finish-status="success" align-center style="width:90%;margin:20px auto">
					<el-step title="选择分类"></el-step>
					<el-step title="选择商品"></el-step>
					<el-step title="确定信息"></el-step>
					<el-step title="添加完成"></el-step>
				</el-steps>
			</el-col>
			<!-- 第一步 选择分类 -->
			<el-col :span="24" v-show="step==0">
				<el-card class="box-card" style="width:85%;margin:20px auto">
						<el-cascader-panel
							:options="categoryOptions"
							:props="categorySetting"
							v-model="categoryCode"
						>
						</el-cascader-panel>
					<el-divider></el-divider>
					<div align="center">
						<el-button type="success" @click="checkGoods" >下一步：选择商品</el-button>
					</div>
				</el-card>
			</el-col>
			<!-- 第二部选择商品 -->
			<el-col :span="24" v-show="step==1">
				<el-card class="box-card" style="width:85%;margin:20px auto">
					<!-- 列表 -->
					<!-- 列表 -->
					<el-table :data="goodsList" minheight="calc(100VH - 270px)" highlight-current-row border style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55"></el-table-column>
						<el-table-column label="sku名称" prop="skuName" align="center" ></el-table-column>
						<el-table-column label="商品价格" prop="goodsPrice" align="center" ></el-table-column>
						<el-table-column label="商品主图" prop="masterImage" align="center" >
							<template slot-scope="scope">
								<img :src="scope.row.masterImage" width="40" height="40" />
							</template>
						</el-table-column>
						<el-table-column label="品牌名称" prop="brandName" align="center" ></el-table-column>
						<el-table-column label="商品规格" prop="goodsSpec" align="center"></el-table-column>
					</el-table>
					<el-divider></el-divider>
					<div align="center">
						<el-button type="primary" @click="step = 0">上一步</el-button>
						<el-button type="success" @click="confirmGoods" >下一步：确定信息</el-button>
					</div>
				</el-card>
			</el-col>
			<!-- 第三部确定商品 -->
			<el-col :span="24" v-show="step==2">
				<el-card class="box-card" style="width:85%;margin:20px auto">
					<el-form ref="dataForm" :model="dataForm" :rules="dataRules">
						<el-table :data="dataForm.seckillGoodsList" minheight="calc(100VH - 270px)" highlight-current-row border style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
							<el-table-column label="商品名称" prop="goodsName" align="center" show-overflow-tooltip>
								<template slot-scope="scope">
									<el-form-item show-overflow-tooltip>
										{{scope.row.goodsName}}
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column label="原价" prop="seckillGoodsOriginalPrice" align="center" >
								<template slot-scope="scope">
									<el-form-item>
										{{scope.row.seckillGoodsOriginalPrice}}
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column label="折扣类型" prop="seckillGoodsRateType" align="center" width="125" >
								<template slot-scope="scope">
									<el-form-item>
										<el-select v-model="scope.row.seckillGoodsRateType" class="input-width" placeholder="全部" @change="handlerChangeRageType(scope.$index,scope.row.seckillGoodsRateType)" >
											<el-option v-for="item in rateTypeOptions"
												:key="item.value"
												:label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column label="折扣" prop="seckillGoodsRate" align="center" >
								<template slot-scope="scope">
									<el-form-item :prop=" 'seckillGoodsList.' + scope.$index +'.seckillGoodsRate'" 
									:rules="scope.row.seckillGoodsRateType == 2 ? dataRules.seckillGoodsRate:{}">
										<el-input v-model="scope.row.seckillGoodsRate" :readonly="scope.row.seckillGoodsRateType == 2 ? false : 'readonly'" @change="handlerSeckillGoodsRate(scope.$index,scope.row.seckillGoodsRate)"></el-input>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column label="秒杀价" prop="seckillGoodsPrice" align="center"  >
								<template slot-scope="scope">
									<el-form-item
										:prop=" 'seckillGoodsList.' + scope.$index +'.seckillGoodsPrice'" 
										:rules="(scope.row.seckillGoodsRateType == 1) ? dataRules.seckillGoodsPrice:{}">
										<el-input v-model="scope.row.seckillGoodsPrice" :readonly="scope.row.seckillGoodsRateType == 1 ? false : 'readonly'" @change="handlerSeckillGoodsRate(scope.$index,scope.row.seckillGoodsRate)"></el-input>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column label="商品数量" prop="seckillStockCount" align="center">
								<template slot-scope="scope">
									<el-form-item :prop=" 'seckillGoodsList.' + scope.$index +'.seckillStockCount'" :rules="dataRules.seckillStockCount">
										<el-input v-model="scope.row.seckillStockCount"></el-input>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column label="限购数量" prop="seckillGoodsQuota" align="center" >
								<template slot-scope="scope">
									<el-form-item :prop=" 'seckillGoodsList.' + scope.$index +'.seckillGoodsQuota'" :rules="dataRules.seckillGoodsQuota">
										<el-input v-model="scope.row.seckillGoodsQuota"></el-input>
									</el-form-item>
								</template>
							</el-table-column>
							<el-table-column label="商品排序" prop="seckillGoodsSort" align="center" >
								<template slot-scope="scope">
									<el-form-item :prop=" 'seckillGoodsList.' + scope.$index +'.seckillGoodsSort'" :rules="dataRules.seckillGoodsSort">
										<el-input v-model="scope.row.seckillGoodsSort"></el-input>
									</el-form-item>
								</template>
							</el-table-column>
						</el-table>
					</el-form>
					<!-- 列表 -->
					<el-divider></el-divider>
					<div align="center">
						<el-button type="primary" @click="step = 1">上一步</el-button>
						<el-button type="success" @click="submitGoods('dataForm')" >下一步：保存</el-button>
					</div>
				</el-card>
			</el-col>
			<el-col :span="24" v-show="step==3">
				<el-card class="box-card" style="width:85%;margin:20px auto">
					<result :isSuccess="true" :title="title">
						<template slot="action">
							<el-button type="primary" @click="back">返回列表</el-button>
						</template>
					</result>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import { findCategoryTree } from '@/api/mall/goodsCategory'
import { findGoodsSkuAll ,addSeckillGoods} from '@/api/activity/seckill'
import Result from '@/components/result/result'
export default{
	data(){
		return{
			step: 0,
			categoryCode:null,
			categoryOptions:[],
			categorySetting: {
				value: "code",
				label: "categoryName",
				children: "children",
				emitPath: false
			},
			searchForm:{
				seckillSceneCode:'',
				seckillCode:'',
				categoryCode: '',
			},
			dataForm:{
				seckillSceneCode:'',
				seckillCode:'',
				seckillGoodsList:[]
			},
			dataRules:{
				seckillStockCount:[{ required: true, message: '必填字段', trigger: 'change' }],
				seckillGoodsQuota:[{ required: true, message: '必填字段', trigger: 'change' }],
				seckillGoodsSort:[
					{ required: true, message: '必填字段', trigger: 'change' },
				],
				seckillGoodsRate:[
					{ required: true, message: '必填字段', trigger: 'change' },
				],
				seckillGoodsPrice:[
					{ required: true, message: '必填字段', trigger: 'change' },
				],
			},	
			goodsList:[],
			checkGoodsList:[],
			loading:false,
			rateTypeOptions: [
				{
					label: '固定价格',
					value: 1
				},
				{
					label: '比例价格',
					value: 2
				},
			],
		}
	},
	components:{
		Result
	},
	created() {
		this.searchForm.seckillSceneCode = this.$route.query.seckillSceneCode
		this.searchForm.seckillCode = this.$route.query.seckillCode
		this.dataForm.seckillSceneCode = this.$route.query.seckillSceneCode
		this.dataForm.seckillCode = this.$route.query.seckillCode
		this.initCategoryTree()
	},
	methods:{
		//初始化商品分类树
		initCategoryTree(){
			findCategoryTree().then(res =>{
				this.categoryOptions = this.getTreeData(res.data.responseData)
			})
		},
		getTreeData(data){
			for(var i=0;i<data.length;i++){
				if(data[i].children.length<1){
					data[i].children=undefined;
				}else {
					this.getTreeData(data[i].children);
				}
			}
			return data;
		},
		handleSelectionChange(val) {
			this.checkGoodsList = val;
		},
		checkGoods(){
			if(this.categoryCode != null ){
				this.showGoods(this.categoryCode);
			}else{
				this.$message.error("请选择类目")
			}
		},
		showGoods(val){
			this.loading = true
			this.searchForm.categoryCode = val
			findGoodsSkuAll(this.searchForm).then(res =>{
				if(res.data.responseCode == 200){
					if(res.data.responseData.length > 0){
						this.goodsList = res.data.responseData
						this.step = 1;
					}else{
						this.$message.error("当前类目下没有可添加的商品,请重新选择类目")
					}
				}
				
			})
			this.loading =false
		},
		confirmGoods(){
			if(this.checkGoodsList.length > 0){
				let seckillGoodsList = []
				this.checkGoodsList.forEach(item =>{
					let oldSeckillGoodsList = this.hasSeckillGoodsList(this.dataForm.seckillGoodsList, item);
					if(oldSeckillGoodsList == null){
						seckillGoodsList.push({
							goodsName: item.skuName,
							goodsImage:item.masterImage,
							goodsCode: item.skuCode,
							seckillGoodsPrice:item.goodsPrice,
							seckillGoodsRate:'',
							//秒杀折扣类型 1固定价格,2比例价格
							//固定价格时候只需填写秒杀价即可,比例价格需填写折扣率并计算出秒杀价,当为比例价格时,秒杀价不可修改,默认为固定价格
							seckillGoodsRateType:1,
							seckillGoodsOriginalPrice:item.goodsPrice,
							//秒杀商品已购买数量默认为0,不展示
							seckillGoodsCount:0,
							//秒杀商品库存 最少为1,可修改
							seckillStockCount:1, 
							seckillGoodsQuota:1,
							seckillGoodsSort:0,
						})
					}else{
						seckillGoodsList.push(oldSeckillGoodsList)
					}
					
				})
				this.dataForm.seckillGoodsList = seckillGoodsList
				this.step = 2;
			}
		},
		hasSeckillGoodsList(seckillGoodsList,item){
			let oldSeckillGoodsList = null
			if(seckillGoodsList.length > 0 ){
				for(let i = 0 ; i < seckillGoodsList.length ; i++){
					if(seckillGoodsList[i].goodsCode == item.skuCode){
						oldSeckillGoodsList = seckillGoodsList[i]
					}
				}
			}
			return oldSeckillGoodsList
		},
		handlerSeckillGoodsRate(index,val){
			console.log(index,val)
		},
		handlerChangeRageType(index,val){
			//1.固定价格
			if(val == 1){
				this.dataForm.seckillGoodsList[index].seckillGoodsRate = ''
				this.dataForm.seckillGoodsList[index].seckillGoodsPrice = this.dataForm.seckillGoodsList[index].seckillGoodsOriginalPrice
			} else {
				this.dataForm.seckillGoodsList[index].seckillGoodsRate = ''
				this.dataForm.seckillGoodsList[index].seckillGoodsPrice = ''
			}
		},
		submitGoods(){
			this.$confirm("将要提交商品数据，需要一小段时间，是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				const set = this.$refs;
				set['dataForm'].validate((valid) => {
					if (!valid) {
						return false
					}
					addSeckillGoods(this.dataForm).then(res =>{
						if(res.data.responseCode == '200'){
							this.step = 3;
						}
					}).catch(err =>{
						this.$message.error(err.data.responseMessage)
					})
				})
			}).catch(e => {
				console.log(e);
				this.$message({
					type: "info",
					message: "已取消"
				});
			});
		},
		back(){
			this.$router.go(-1)
		}
	}
}
</script>

<style>
.el-cascader-menu__wrap{
	min-height: 400px;
	width: 400px;
}
</style>
